<template>
    <div class="main-content">
        <el-tabs v-model="activeKey" type="card">
            <el-tab-pane name="fundGroup">
                <span slot="label"><i class="el-icon-discover"></i>账户组信息 </span>
                <FundGroupInfo v-if="activeKey == 'fundGroup'"></FundGroupInfo>
            </el-tab-pane>
            <el-tab-pane name="outerFGLoadin">
                <span slot="label"><i class="el-icon-discover"></i>外部账户组导入设置 </span>
                <OuterFGLoadin v-if="activeKey == 'outerFGLoadin'"></OuterFGLoadin>
            </el-tab-pane>
            <!-- <el-tab-pane name="productGroup">
                <span slot="label"><i class="el-icon-discover"></i>产品分组概况 </span>
                <ProductGroup v-if="activeKey == 'productGroup'"></ProductGroup>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import FundGroupInfo from './fund-group-setting/fund-group-info.vue';
import OuterFGLoadin from './fund-group-setting/outer-fund-group-loadin.vue';
import ProductGroup from './fund-group-setting/product-group.vue';

@Component({
    name: 'fundGroupSetting',
    components: {
        FundGroupInfo,
        OuterFGLoadin,
        ProductGroup,
    },
})
export default class fundGroupSetting extends Vue {
    private activeKey: string = 'fundGroup';
}
</script>
<style lang="scss" scoped>
.main-content {
    min-width: 1200px;
    background: #fff;
    padding-top: 10px;
    overflow: auto;
    height: 100vh;
}
.main-content /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.main-content /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}
</style>
